<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Usage</title>
    <!-- <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css"> -->
</head>

<body style="margin: 0;">
    <div style="border-bottom: 1px solid #e0e0e0;box-shadow: 0 0 4px #BDBDBD;">
        <div style="width: 794px; height: 30px; margin: 0 auto; line-height: 30px; text-align: right;">
            <button onclick="do_print()">打印</button>
        </div>
    </div>
    <div id="svg-container"
        style="width: 794px; height: 1123px; border: 1px solid #e0e0e0; box-shadow: 0 0 1em #BDBDBD; margin: 20px auto;">
        <svg xmlns="http://www.w3.org/2000/svg" width="800" height="600">
            <g>
                <title>Layer 1</title>
                <text transform="matrix(1 0 0 1 0 0)" stroke-width="2" xml:space="preserve" text-anchor="start"
                    font-family="Noto Sans JP" font-size="24" id="svg_1" y="60.19999" x="40.39999" stroke="#000"
                    fill="#000000">Usage</text>
                <text transform="matrix(1 0 0 1 0 0)" xml:space="preserve" text-anchor="start"
                    font-family="Noto Sans JP" font-size="16" id="svg_2" y="112.19999" x="39.39999" stroke-width="0"
                    stroke="#000" fill="#000000">This is a test HTML file to demonstrate basic structure and content.
                </text>
                <text transform="matrix(1 0 0 1 0 0)" xml:space="preserve" text-anchor="start"
                    font-family="Noto Sans JP" font-size="16" id="svg_3" y="149.19999" x="39.39999" stroke-width="0"
                    stroke="#000" fill="#000000">Feel free to modify this file as needed for your testing purposes.
                </text>
                <text transform="matrix(1 0 0 1 0 0)" xml:space="preserve" text-anchor="start"
                    font-family="Noto Sans JP" font-size="16" id="svg_4" y="190.19999" x="39.39999" stroke-width="0"
                    stroke="#000" fill="#000000">Item 1</text>
                <text transform="matrix(1 0 0 1 0 0)" xml:space="preserve" text-anchor="start"
                    font-family="Noto Sans JP" font-size="16" id="svg_5" y="252.19999" x="39.39999" stroke-width="0"
                    stroke="#000" fill="#000000">Item 3</text>
                <text transform="matrix(1 0 0 1 0 0)" xml:space="preserve" text-anchor="start"
                    font-family="Noto Sans JP" font-size="16" id="svg_6" y="221.19999" x="39.39999" stroke-width="0"
                    stroke="#000" fill="#000000">Item 2</text>
            </g>
        </svg>
    </div>

    <script>
        function do_print() {
            var svgContainer = document.getElementById('svg-container');

            let iframe = document.createElement("iframe");
            // iframe.style.display = "none";
            iframe.style.border = "1px solid #e0e0e0";
            iframe.style.background = "white";
            iframe.style.width = "400px";
            iframe.style.height = "600px";
            iframe.style.position = "fixed";
            iframe.style.top = "calc(50% - 300px)";
            iframe.style.left = "calc(50% - 200px)";

            iframe.src = "http://192.168.255.1:5173";
            iframe.onload = () => {
                console.log("web printer iframe loaded");

                iframe.contentWindow.postMessage({
                    content: svgContainer.innerHTML,
                    preview: true
                }, iframe.src);
            };
            document.body.appendChild(iframe);
        }
    </script>
</body>

</html>